<template>
  <div class="team-main">
    <MemberItem
      v-for="(i, index) in member_list"
      :key="index"
      :full_name="i.full_name"
      :posts="i.posts"
      :en_name="i.en_name"
      :person_img="i.person_img"
    ></MemberItem>
  </div>
</template>

<script>
import MemberItem from "@/components/MemberItem.vue";

export default {
  name: "Team",
  components: {
    MemberItem,
  },
  data: function () {
    return {
      member_list: [
        {
          full_name: "麦克斯韦",
          posts: "物理学家，数学家",
          en_name: "James Clerk Maxwell",
          person_img: require("../assets/person_1.jpg"),
        },
        {
          full_name: "麦克斯韦",
          posts: "物理学家，数学家",
          en_name: "James Clerk Maxwell",
          person_img: require("../assets/person_1.jpg"),
        },
        {
          full_name: "麦克斯韦",
          posts: "物理学家，数学家",
          en_name: "James Clerk Maxwell",
          person_img: require("../assets/person_1.jpg"),
        },
        {
          full_name: "麦克斯韦",
          posts: "物理学家，数学家",
          en_name: "James Clerk Maxwell",
          person_img: require("../assets/person_1.jpg"),
        },
        {
          full_name: "麦克斯韦",
          posts: "物理学家，数学家",
          en_name: "James Clerk Maxwell",
          person_img: require("../assets/person_1.jpg"),
        },
        {
          full_name: "麦克斯韦",
          posts: "物理学家，数学家",
          en_name: "James Clerk Maxwell",
          person_img: require("../assets/person_1.jpg"),
        },

      ],
    };
  },
};
</script>

<style>
.team-main {
  width: 80%;
  margin: 0px auto;
  padding: 30px 0px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-around;
  
}
</style>